<template>
  <div class="upload-activity">
    <MyHeader>
      <div slot="title">上传专题活动</div>
    </MyHeader>
    <div class="activity-info">
      <el-form
        label-width="20px"
        :model="activityForm"
        :rules="videosRules"
        ref="activityForm"
      >
        <MyHeader>
          <div slot="title">活动信息</div><span slot="secondTitle">建议尺寸为1920*748像素</span>
        </MyHeader>
        <div class="btn-box">
          <el-form-item prop="name" label="活动名称：" label-width="100px">
            <el-input v-model="activityForm.name" />
          </el-form-item>
          <el-form-item prop="start_time" label="活动时间：" label-width="100px">
            <el-date-picker
              @change="handleData"
              v-model="time"
              type="datetimerange"
              range-separator="至"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </div>
        <MyHeader>
          <div slot="title">活动banner</div><span slot="secondTitle">建议尺寸为1920*748像素</span>
        </MyHeader>
        <div class="activity-info-form">
          <el-form-item>
            <uploadImg
              @setCardPic="setBannerPic"
              ref="bannerPath"
              type="image"
              api="uploadImage"
              :params="bannerParams"
            >
              <!-- <div slot="button">上传banner</div> -->
            </uploadImg>
          </el-form-item>
        </div>
        <MyHeader>
          <div slot="title">活动简介</div>
        </MyHeader>
        <div class="wang-editor">
          <client-only>
            <el-form-item prop="introduction">
              <WangEditor :introduction="activityForm.introduction" @getIntroduct="getIntroduct" />
            </el-form-item>
          </client-only>
        </div>
        <MyHeader>
          <div slot="title">专题文章</div>
        </MyHeader>
        <div class="btn-box">
          <div class="btn">
            <div class="about-btn" @click="handleDialog(essayList, '选择文章')">选择文章</div>
            <div class="upload-btn" @click="openDrawer('上传文章', 'UploadEssay')">上传文章</div>
          </div>
          <div class="choose-list" v-for="item in activityForm.essay_list" :key="item.data_id">
            {{ item.title }}
          </div>
        </div>
        <MyHeader>
          <div slot="title">活动集锦</div>
        </MyHeader>
        <div class="game-foto">
          <uploadImg
            @setCardPic="setCardPic($event, 'picture_list')"
            ref="coverPath"
            type="image"
            api="uploadImage"
            :params="coverParams"
            multiple
            :showImg="false"
          >
          </uploadImg>
          <div class="show-img" v-for="(item, index) in activityForm.picture_list" :key="index" alt="">
            <div class="marks-delete all-center" @click="deleteImg(item)">
              <i class="el-icon-delete"></i>
            </div>
            <el-image :src="item" fit="cover" class="show-img">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
        </div>
        <MyHeader>
          <div slot="title">活动视频</div>
        </MyHeader>
        <div class="btn-box">
          <div class="btn">
            <div class="about-btn" @click="handleDialog(videoList, '选择视频')">选择视频</div>
            <div class="upload-btn" @click="openDrawer('上传视频', 'UploadVideos')">上传视频</div>
          </div>
          <div class="choose-list" v-for="item in activityForm.work_video_list" :key="item.data_id">
            {{ item.name }}
          </div>
        </div>
        <MyHeader>
          <div slot="title">活动作品</div>
        </MyHeader>
        <div class="btn-box">
          <div class="btn">
            <div class="about-btn" @click="handleDialog(workList, '选择作品')">选择作品</div>
            <div class="upload-btn" @click="openDrawer('上传作品', 'UploadWorks')">上传作品</div>
          </div>
          <div class="choose-list" v-for="item in activityForm.work_list" :key="item.data_id">
            {{ item.name }}
          </div>
        </div>
        <div class="submit-box">
          <div class="release all-center" @click="handleRelease('activityForm')">
            发布
          </div>
          <!-- <div @click="handlePreview" class="preview-btn all-center">预览</div> -->
          <div @click="handleRelease('activityForm', true)" class="draft">
            草稿箱
          </div>
        </div>
        <AboutDialog
          :visible="visible"
          :dialogTitle="dialogTitle"
          :data="dataList"
          :typeProps="typeProps"
          :chooseLoading="chooseLoading"
          :chooseValue="chooseValue"
          @close="close"
          @getChooseData="getChooseData"
        />
      </el-form>
      <el-drawer
        :title="title"
        :visible.sync="drawer"
        class="drawer-box"
        size="100%">
        <div>
          <component
            :is="uoloadComponent"
            :menuActive="0"
          />
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import MyHeader from "../component/common/myHeader";
import AboutDialog from "../component/common/aboutDialog";
import WangEditor from "../../../components/wangEditor";
import UploadWorks from "../uploadWorks/index.vue"
import UploadVideos from "../uploadVideos/index.vue"
import UploadEssay from "../uploadEssay/index.vue"
import _ from 'lodash'
export default {
  name: "",
  middleware: 'identityInfo',
  components: {
    MyHeader,
    AboutDialog,
    WangEditor,
    UploadEssay,
    UploadVideos,
    UploadWorks
  },
  props: ['data_id'],
  data() {
    return {
      time: [],
      chooseLoading: false,
      activityForm: {
        name: '',
        title_page: '',
        work_video_list: [],
        work_list: [],
        essay_list: [],
        introduction: "",
        start_time: '',
        end_time: '',
        picture_list: [],
        is_audit: 0
      },
      uoloadComponent: "",
      drawer: false,
      title: "",
      videosRules: {
        introduction: [
          {
            required: true,
            message: "请输入活动简介",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入活动名称",
            trigger: "blur",
          },
        ],
        time: [
          {
            required: true,
            message: "请选择时间范围",
            trigger: "change",
          },
        ]
      },
      importForm: {
        url: "",
      },
      importRules: {
        url: [
          {
            required: true,
            message: "请输入视频链接",
            trigger: "blur",
          },
        ],
      },
      typeOptions: ["国画", "油画", "水彩", "版画", "水粉", "素描", "铅笔"],
      bannerParams: {
        op: "upload_file"
      },
      coverParams: {
        op: "upload_file",
        // name: "video_path",
        // data_id: "",
      },
      importVisible: false,
      videoUrl: "", // 导入视频输入框的内容
      visible: false,
      essayList: [],
      // chooseEssay: [],
      videoList: [],
      // chooseVideo: [],
      workList: [],
      // chooseWork: [],
      dataList: [],
      dialogTitle: '选择作品',
      typeProps: {},
      chooseValue: [],
      // data_id: ""
    };
  },
  computed: {},
  watch: {
    data_id(val) {
      if(val) {
        console.log(val)
        this.getActivityDesc(val)
      } else {
        this.resetForm()
      }
    }
  },
  created() {},
  mounted() {
    this.getEssay()
    this.getVideoList()
    this.getWorkList()
    this.getActivityDesc(this.$route.query.data_id)
  },
  methods: {
    resetForm() {
      this.$refs.activityForm.resetFields()
      this.$refs.activityForm.resetFields()
      for(const key in this.activityForm) {
        this.activityForm[key] = ''
      }
      this.$refs.bannerPath.setEditImg()
      this.$refs.coverPath.setEditImg()
    },
    getActivityDesc(data_id) {
      if (data_id) {
        this.$api.getActivityDesc({ data_id: this.data_id }).then(res => {
          if (res.status == '$SUCCESS') {
            this.activityForm.name = res.result.name
            this.activityForm.title_page = res.result.title_page
            this.$refs.bannerPath.setEditImg(this.activityForm.title_page)
            // this.$set(this.activityForm, 'work_list', res.result.work_list || [])
            // this.$set(this.activityForm, 'essay_list', res.result.essay_list || [])
            // this.$set(this.activityForm, 'work_video_list', res.result.work_video_list || [])
            // this.$set(this.activityForm, 'picture_list', res.result.picture_list || [])
            this.$set(this, 'time', [res.result.start_time, res.result.end_time])
            this.activityForm.introduction = res.result.introduction
            this.activityForm.start_time = res.result.start_time
            this.activityForm.end_time = res.result.end_time
            this.getActivityVideo()
            this.getActivityCollec()
            this.getAboutEssay()
            this.getActivity()
          }
        })
      }
    },
    getActivityVideo() {
      let params = {
        special_id: this.data_id
      }
      // 获取专题活动列表
      this.$api.getActivityVideo(params).then(res => {
        if (res.status == '$SUCCESS') {
          this.$set(this.activityForm, 'work_video_list', res.result.item_list || [])
        }
      })
    },
    getActivityCollec() {
      let params = {
        special_id: this.data_id,
      }
      this.$api.getActivityCollec(params).then(res => {
        if (res.status == '$SUCCESS') {
          this.$set(this.activityForm, 'picture_list', res.result.item_list || [])
        }
      })
    },
    getAboutEssay() {
      let params = {
        special_id: this.data_id,
      }
      this.$api.getAboutEssay(params).then(res => {
        if (res.status == '$SUCCESS') {
          this.$set(this.activityForm, 'essay_list', res.result.item_list || [])
        }
      })
    },
    getActivity() {
      let params = {
        special_id: this.data_id,
      }
      this.$api.getActivity(params).then(res => {
        if (res.status == '$SUCCESS') {
          this.$set(this.activityForm, 'work_list', res.result.item_list || [])
        }
      })
    },
    handleData(value) {
      console.log(value)
      if (value?.length > 0) {
        this.activityForm.start_time = value[0]
        this.activityForm.end_time = value[1]
      }
      console.log(this.activityForm)
    },
    close() {
      this.visible = false
    },
    openDrawer(title, type) {
      this.drawer = true;
      this.title = title;
      this.uoloadComponent = type;
    },
    // 获取选中的数据
    getChooseData(value) {
      console.log(value)
      if (this.dialogTitle == '选择文章') {
        const chooseEssay = this.essayList.filter(item => {
          return value.includes(item.data_id)
        })
        this.activityForm.essay_list = chooseEssay.map(ele => {
          return {
            title: ele.title,
            data_id: ele.data_id
          }
        })
      } else if (this.dialogTitle == '选择视频') {
        const chooseVideo = this.videoList.filter(item => {
          return value.includes(item.data_id)
        })
        this.activityForm.work_video_list = chooseVideo.map(ele => {
          return {
            name: ele.video_name,
            data_id: ele.data_id
          }
        })
      } else {
        const chooseWork = this.workList.filter(item => {
          return value.includes(item.data_id)
        })
        this.activityForm.work_list = chooseWork.map(ele => {
          return {
            name: ele.name,
            data_id: ele.data_id
          }
        })
      }
      console.log('this.activityForm.essay_list', this.activityForm.essay_list)
    },
    // 打开弹窗
    handleDialog(data, dialogTitle, props) {
      console.log(props)
      this.visible = true
      this.chooseLoading = true;
      this.dialogTitle = dialogTitle
      // this.typeProps = props
      if (dialogTitle == '选择文章') {
        this.getEssay()
        setTimeout(() => {
          this.dataList = _.cloneDeep(this.essayList)
          this.chooseValue = [...this.activityForm.essay_list]
          this.typeProps = {
            key: 'data_id',
            label: 'title'
          }
          this.chooseLoading = false;
        }, 1000);
      } else if (dialogTitle == '选择视频') {
        this.getVideoList()
        setTimeout(() => {
          this.dataList = _.cloneDeep(this.videoList)
          this.typeProps = {
            key: 'data_id',
            label: 'video_name'
          }
          this.chooseLoading = false;
          this.chooseValue = [...this.activityForm.work_video_list]
        }, 1000);
      } else {
        this.getWorkList()
        setTimeout(() => {
          this.dataList = _.cloneDeep(this.workList)
          this.typeProps = {
            key: 'data_id',
            label: 'name'
          }
          this.chooseValue = [...this.activityForm.work_list]
          this.chooseLoading = false;
        }, 1000);
      }
    },
    // 获取文章列表
    getEssay() {
      const params = {
        page_num: 1,
        page_count: 10000,
        userid: this.$store.state.user.info?.user_info?.data_id
      }
      this.$api.getEssay(params).then(res => {
        this.essayList = Array.isArray(res.result.item_list) ? res.result.item_list : []
      })
    },
    // 获取视频列表
    getVideoList() {
      this.$api
        .getArtVideoList({
          art_id: this.$store.state.user.info?.user_info?.art_info.data_id,
          page_num: 1,
          page_count: 10000,
        })
        .then((res) => {
          this.videoList = Array.isArray(res.result.item_list) ? res.result.item_list : []
        });
    },
    // 获取作品列表
    getWorkList() {
      this.$api.getWorksList({
        art_id: this.$store.state.user.info.user_info?.art_info?.data_id,
        page_num: 1,
        page_count: 10000,
        recycle: 0
      }).then((res) => {
        this.workList = Array.isArray(res.result.item_list)? res.result.item_list : []
      })
    },
    getIntroduct(html, text) {
      this.activityForm.introduction = html
      this.activityForm.text = text
    },
    // 预览
    handlePreview() {
      console.log('预览')
    },
    handleDraft() {
      console.log('放入草稿箱')
    },
    // 发布
    handleRelease(formName, draft) {
      if (this.activityForm.essay_list.length <= 0) {
        return this.$message.error('请选择专题文章')
      }
      if (this.activityForm.work_list.length <= 0) {
        return this.$message.error('请选择活动作品')
      }
      if (this.activityForm.work_video_list.length <= 0) {
        return this.$message.error('请选择活动视频')
      }
      if (!this.activityForm.text) {
        return this.$message.error('请输入活动简介')
      }
      this.$refs['activityForm'].validate((valid) => {
        if (valid) {
          const data = {
            ...this.activityForm,
            recycle: draft ? 1 : 0
          }
          let api
          if (this.$route.query.data_id) {
            api = 'updateActivity'
          } else {
            api = 'createActivity'
          }
          console.log('apiList', this.$api)
          this.$api[api]({ ...data }, { data_id: this.$route.query?.data_id }).then(res => {
            console.log(res)
            if (res.status == '$SUCCESS') {
              this.$message.success('发布专题活动成功')
              this.$router.push({ path: '/editPersonalHome', query: { menuActive: 4 } })
            } else {
              this.$message.error('发布失败，请联系管理员')
            }
          })
        }
      })
    },
    /*执行uploadImg组件报出来的事件，path就是显示图片的路径*/
    setCardPic(path, pic) {
      // this.form[pic] = path
      console.log(path, pic);
      this.activityForm.picture_list.push(path)
    },
    deleteImg(item) {
      this.activityForm.picture_list = this.activityForm.picture_list.filter(ele => {
        return ele !== item
      })
    },
    setBannerPic(path, pic) {
      this.activityForm.title_page = path
    },
    setVideo(path, pic) {
      console.log(path, pic);
    },
    // 打开导入视频弹窗
    importVideo() {
      this.importVisible = true;
    },
    // 提交导入视频信息
    importSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message.success("导入成功");
        }
      });
    },
    importClose() {
      this.importVisible = false;
      this.$refs.importForm.resetFields();
    },
  },
};
</script>

<style scoped lang="less">
.upload-activity {
  // padding: 60px 276px 80px;
  .upload-works,
  .upload-videos {
    padding: 0 100px 100px 100px;
  }

  .title {
    font-size: 30px;
    font-weight: 800;
    color: #000;
    line-height: 30px;
    margin-bottom: 40px;
  }

  .about-btn {
    position: relative;
  }

  .wang-editor::before {
    content: "*";
    color: #ff4949;
    margin-right: 4px;
    position: absolute;
    margin: auto;
  }
  .about-btn::before {
    content: "*";
    color: #ff4949;
    margin-right: 4px;
    position: absolute;
    left: -20px;
    bottom: 3px;
    margin: auto;
  }

  ::v-deep(.el-dialog__header) {
    padding: 24px 24px 0 40px;
    text-align: left;
  }

  ::v-deep(.el-dialog__body) {
    padding: 60px 40px 40px;
  }

  .works-introduce {
    background: #fff;
    padding: 40px 217px 40px 40px;
    margin-bottom: 40px;

    ::v-deep(.el-textarea__inner) {
      height: 122px;
      background-color: #f3f4f4;
      border-radius: 0;
    }

    ::v-deep(.el-input__count) {
      background-color: #f3f4f4;
    }

    .is-required::before {
      content: "";
    }
  }

  // ::v-deep(.el-icon-arrow-up:before) {
  //   width: 0px;
  //   height: 0px;
  //   border: 12px solid transparent;
  //   border-top-color: #999;
  //   content: '';
  // }

  ::v-deep(.el-dialog__footer) {
    padding: 0 0 60px;

    .el-button {
      width: 220px;
      height: 48px;
      border: 0;
      border-radius: 0;
      font-size: 16px;
      color: #333;
      border: 1px solid #ccc;
    }
    .el-button--primary {
      background: #e0cbb4;
      border: 0;
    }

    .el-button {
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }
  }

  .activity-info {
    .activity-info-form {
      padding: 40px 218px 5px 61px;
      margin-bottom: 40px;
      background: #fff;

      :deep(.div-plus) {
        width: 772px;
        height: 302px;
      }

      ::v-deep(.el-select) {
        width: 100%;
      }

      ::v-deep(.el-input__inner) {
        background-color: #f3f4f4;
        border-radius: 0;
        height: 50px;
      }

      ::v-deep(input::-webkit-input-placeholder) {
        color: #999;
      }

      ::v-deep(.el-form-item__content) {
        line-height: normal;
      }
    }

    .wang-editor {
      padding: 40px;
      margin-bottom: 40px;
      background-color: #fff;
    }

    .btn-box,
    .game-foto {
      padding: 60px;
      background: #fff;
      margin-bottom: 40px;

      .btn {
        .about-btn,
        .upload-btn {
          width: 220px;
          height: 48px;
          font-size: 16px;
          color: #333;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          margin-right: 40px;
          cursor: pointer;
          margin-bottom: 30px;
        }

        .upload-btn {
          background-color: #fff;
          border: 1px solid #e0cbb4;
        }
      }

      .choose-list {
        font-size: 16px;
        color: #333;
        line-height: 30px;
      }

      .about-btn {
        background: #e0cbb4;
      }

      .show-img {
        width: 402px;
        height: 302px;
        border: 1px solid #ccc;
        margin-bottom: 22px;
        margin-right: 20px;
        position: relative;
        display: inline-block;

        ::v-deep(.el-image) {
          width: 100%;
          height: 100%;
        }

        .marks-delete {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: #000;
          opacity: 0;
          z-index: 9;

          i {
            font-size: 50px;
          }

          &:hover {
            opacity: 0.7;
            cursor: pointer;
          }
        }

        &:nth-child(3n) {
          margin-right: 0;
        }
      }
    }

    .upload-cover {
      padding: 40px 0 40px 61px;
      background: #fff;
      margin-bottom: 60px;

      ::v-deep(.avatar-uploader .el-upload) {
        border: 1px solid #ccc;
      }

      ::v-deep(.div-plus) {
        width: 402px;
        height: 302px;
      }
    }

    .submit-box {
      .preview-btn,
      .release {
        width: 220px;
        height: 48px;
        font-size: 16px;
        color: #333;
        background: #e0cbb4;
        cursor: pointer;
      }

      .preview-btn {
        background-color: transparent;
        border: 1px solid #ccc;
        margin-left: 35px;
      }

      .draft {
        font-size: 16px;
        font-weight: 400;
        color: #C5A37D;
        float: right;
        cursor: pointer;
      }
    }
  }
}
</style>
